<template>
  <div style="width:100%;height:100%;">
    <el-form label-width="90">
      <el-form-item label="图片">
        <el-upload action="#" :limit="1" list-type="picture-card" :show-file-list="false" :auto-upload="true"
                   :before-upload="handleBeforeUpload">
          <div style="position: relative; width:100%;height:100%">
            <div style="width:100%;height:100%"
                 :style='{backgroundImage:"url(\""+props.co.option.url+"\")",backgroundSize: "contain",backgroundRepeat: "no-repeat"}'/>
            <span style="position:absolute;top:50%;left:50%;transform:translate(-50% ,-50%);">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview($event)"
              >
              <el-icon><zoom-in/></el-icon>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="横向位置">
        <el-input-number :step="1" v-model="props.co.x"/>
      </el-form-item>
      <el-form-item label="纵向位置">
        <el-input-number :step="1" v-model="props.co.y"/>
      </el-form-item>
      <el-form-item label="宽度">
        <el-input-number :step="1" v-model="props.co.w"/>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number :step="1" v-model="props.co.h"/>
      </el-form-item>
    </el-form>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full style="width:100%;" :src="dialogImageUrl" alt="Preview Image"/>
  </el-dialog>
</template>
<script setup lang="ts">
import {Ref, ref} from "vue";
import {ComponentOption} from "@/components/MPanel/ComponentOption.ts";
import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'

const url: Ref<String | null> = ref(null)
const props = defineProps<{
  co: ComponentOption
}>();

function getOption() {
  return {
    url: url.value,
  }
}

defineExpose({getOption})

import type {UploadFile} from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handlePictureCardPreview = (event: MouseEvent) => {
  event.stopPropagation();
  dialogImageUrl.value = props.co.option.url!
  dialogVisible.value = true
}

function handleBeforeUpload(rawFile: UploadRawFile) {
  createReader(rawFile);
  return false;
}

function createReader(file) {
  var reader = new FileReader;
  reader.onload = function (evt) {
    var image = new Image();
    image.onload = function () {
      props.co.option.url = evt.target.result
    };
    image.src = evt.target.result;
  };
  reader.readAsDataURL(file);
}

</script>
